//用来切换黑夜模式的函数
export const darkModeSwitch = (e) => {
  // 检查是否支持 startViewTransition API
  if (typeof document.startViewTransition === "function") {
    // 如果支持 startViewTransition API，则使用它来创建一个过渡动画
    const transition = document.startViewTransition(() => {
      // 切换文档根元素的 'dark' 类，以应用或移除暗模式样式
      if (!document.documentElement.classList.contains("dark")) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    });

    // 获取触发切换的鼠标事件的客户端 X 和 Y 坐标
    const x = e.clientX;
    const y = e.clientY;

    // 计算从点击位置到视窗边缘的最远距离，用于确定动画的扩散半径
    const tragetRadius = Math.hypot(
      Math.max(x, window.innerWidth - x),
      Math.max(y, window.innerHeight - y)
    );

    // 当过渡准备就绪时，开始执行动画
    transition.ready.then(() => {
      document.documentElement.animate(
        {
          // 定义动画的 clipPath，从点击位置的圆开始，扩散到最大半径
          clipPath: [
            `circle(0% at ${x}px ${y}px)`,
            `circle(${tragetRadius}px at ${x}px ${y}px)`,
          ],
        },
        {
          // 设置动画的持续时间为 400ms，并指定伪元素用于动画
          duration: 400,
          pseudoElement: "::view-transition-new(root)",
        }
      );
    });
  } else {
    // 不支持 startViewTransition API，直接切换暗模式，无过渡动画
    if (!document.documentElement.classList.contains("dark")) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }
};
